<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/tree_view.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:58 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>{$sysname} - 推荐结构</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="css/plugins/treeview/bootstrap-treeview.css" rel="stylesheet">

</head>

<body class="gray-bg">

    <div class="row wrapper wrapper-content animated fadeInRight">
        <div class="col-sm-4" style="width: 100%">
            <div class="ibox float-e-margins">
                <h2>推荐结构</h2>
                <form action="{:U('User/search')}" method="post" name="myform" enctype="multipart/form-data">
                    <div class="input-group">
                        <input type="hidden" name="type" value="childtree" class="input form-control">
                        <input type="text" placeholder="输入用户名查找" value="{$keyword}" name="keyword" class="input form-control">
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn btn-primary"> <i class="fa fa-search"></i> 搜索</button>
                            </span>
                    </div>
                </form>

                <div class="ibox-title">
                    <h5>默认</h5>
                </div>
                <div class="ibox-content">
                    <div id="treeview1" class="test">
                        <ul class='list-group'>
                            <foreach name='parent' item='item'>
                                <li class='list-group-item' id='parent_{$item.id}'>
                                    <span class='icon' id="span_{$item.id}" onclick='show_child({$item.id})'><i><span  <if condition='$item.has eq  1'> class='view' <else/> class='view1' </if> id='badge_{$item.id}' >+</span></i></span>
                                    {$item.username}
                                    <span id='add_ul_{$item.id}'></span>
                                </li>

                            </foreach>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .list-group{
            margin-bottom: 0;
        }
        .view{
            width: 20px;
            height: 18px;
            border: 1px solid;
            position: relative;
            display: inline-table;
            text-align: center;
            line-height: 18px;
            background: #000;
            color: #fff;
        }
        .view1{
            width: 20px;
            height: 18px;
            border: 1px solid;
            position: relative;
            display: inline-table;
            text-align: center;
            line-height: 18px;
            background: #ddd;
            color: #fff;
        }
    </style>
    <script type="text/javascript">
        //var left = 40;
        function show_child(child){
                $.ajax({
                    type:"GET",
                    url:"{:U('User/childtree')}",
                    data:{parent:child},
                    dataType: "json",
                    success:function(data){
                        var html_start = "<ul class='list-group' style=''>" ;
                        var content = "";
                        for(var i=0;i<data.length;i++){
                            if(data[i].has == 1){
                                var view = 'view'
                            }else{
                                var view = 'view1'
                            }  //style='padding-left: "+left+"px'
                            content +=  "<li class='list-group-item'  id='parent_"+ data[i].id +"'"+ "><span class='icon' id = 'span_"+ data[i].id +"'" +" onclick='show_child(" + data[i].id + ")'><i><span  class="+view+" id='badge_"+ data[i].id + "'"+">+</span></i></span>"+data[i].username +" <span id='add_ul_" + data[i].id+ "'"+"></span></li>" ;
                        }
                        var html_end = " </ul>";
                        var html = html_start + content + html_end
                        $("#add_ul_"+child).html(html)
                        show = child;
                        //left = left +40
                    }
                });
            $("#span_"+child).removeAttr("onclick");
            $("#span_"+child).attr("onclick","hide_child("+child+")");
            $("#badge_"+child).html("-")
            }
        function hide_child(child){
            $("#add_ul_"+child).html("");
            $("#span_"+child).removeAttr("onclick");
            $("#span_"+child).attr("onclick","show_child("+child+")");
            $("#badge_"+child).html("+")
        }

    </script>

    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/content.min.js?v=1.0.0"></script>
    <!--script src="js/plugins/treeview/bootstrap-treeview.js"></script-->
    <!--<script src="js/demo/treeview-demo.min.js"></script>-->
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>

</body>


<!-- Mirrored from www.zi-han.net/theme/hplus/tree_view.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:59 GMT -->
</html>
